// observer用于劫持监听所有属性用的

const data = {
  name: "zhangsam",
  age: 20,
};

const observer = (data, prop, value) => {
  Object.defineProperty(data, prop, {
    get() {
      return value;
    },
    set(v) {
      // 可以在set函数里面知道数据什么时候被修改的
      // 那么就可以在这里去调用渲染函数，让页面重新渲染
      console.log(prop + "的值从" + value + "变成了" + v);
      value = v;
    },
  });
};

// ["name", "age"]
Object.keys(data).forEach((item) => {
  observer(data, item, data[item]);
});

console.log(data.name);
console.log(data.age);

data.name = "lisi";
console.log(data.name);

setTimeout(() => {
  data.age = 30;
}, 2000);
